<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta charset='utf-8'>
        <meta name="author" content="order by dede58.com"/>
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<title>商城</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="stylesheet" type="text/css" href="css/page.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.js"></script>
		
		<!-- 引入 layui.css -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
		 
		<!-- 引入 layui.js -->
		<script src="//unpkg.com/layui@2.6.8/dist/layui.js">
		
	</head>

	

		<script type="text/javascript">
		
		$(function(){
			
		});
		
		
		</script>
		
		<script type="text/javascript">
		$(function(){
			/* 获取所有游戏 */
			function findAllGamesStart(){
				$.ajax({
					async:true,
					type:"GET",
					url:"../GamesServlet",
					data:{
						op:"findAll"
					},
					contentType:"application/x-www-form-urlencoded",
					dataType:"json",
					success:function(result,status,xhr){
						let content = "";
						$.each(result.data,function(index,games){
							/* 注意：当下方li中添加class名为cur的时候为选中的时候样式 */
							content += "<div class=\"list clearfix transition\">"+
											"<div class=\"tu clearfix\">"+
											"<img id=\"recommendedimages\" src=\"/gamestore/FileDownloadServlet?type=image&fileName="+games.image+"\"/>"+
											"<input type=\"hidden\" id=\"id\" name=\"gamesId\" value=\""+games.gamesId+"\">"+
											"<span></span>"+
											
											"<div class=\"ycang clearfix\">"+
												"<samp class=\"opa8\"></samp>"+
												"<div class=\"nr clearfix\">"+
													
													"<ul>"+
														"<li class=\"box-s transition\">收藏</li>"+
														"<li class=\"box-s transition\">"+
															"<a href=\"shopping.jsp\" class=\"box-s\">"+
															"购物车"+
															"</a>"+
														"</li>"+
													"</ul>"+
												"</div>"+							
											"</div>"+
										"</div>"+
										"<div class=\"xia clearfix box-s\">"+
											"<p class=\"bt over\">"+
												games.gamesName+"（"+games.gamesType.typeName+"）"+
											"</p>"+
											"<div class=\"price clearfix\">"+
												"<span class=\"fl\">￥"+games.price+"</span>"+
												"<span id=\"agp\"><a href=\"jiesuan.jsp?gamesId="+games.gamesId+"\" class=\"goumai fr ra3 transition\">立即购买</a></span>"+
											"</div>"+
										"</div>"+
									"</div>";
									
								/* 查询用户是否已购买 */
								let cid = ${!empty sessionScope.customer.customerId} ?　"${sessionScope.customer.customerId}" : 0;
								let gamesId = games.gamesId;	
								$.ajax({
									async:true,
									type:"GET",
									url:"../OrderServlet",
									data:{
										op:"findByStatusAndGamesIdAndCustomerId",
										status:"1",
										gamesId:gamesId,
										customerId:cid
									},
									contentType:"application/x-www-form-urlencoded",
									dataType:"json",
									success:function(result,status,xhr){
										
										if(result.status == 1){
											$("#mall").children("div").each(function(index,recommend){
												
												if(index==gamesId-1){
													if($(this).find("input[name='gamesId']").val()==gamesId){
														$(this).find("#agp").html("<a href=\"javascript:void(0)\" class=\"goumai fr ra3 transition\" style=\"background-color: green;\">已购买</a>");
													}else{
														$(this).find("#agp").html("<a href=\"jiesuan.jsp?gamesId="+gamesId+"\" class=\"goumai fr ra3 transition\">立即购买</a>");
													}
												}
												
											});
											
											
										}
											
									},
							     });
									
									
							});
						$("#mall").html(content);
					},
				});
			}
			
			
			
			/* 对推荐游戏的图片所在区域recommendedimages绑定跳转详情页面 */
			$(document).on("click","#recommendedimages",function(){
				let gameId = $(this).siblings("input").val();
				location.href="pro_detail.jsp?gamesId="+gameId;
			});
			
		});
		</script>
		
		<script type="text/javascript">
		$(function(){
			let c = "<!--header star-->"+
			"<div class=\"header clearfix\">"+
				"<div class=\"top clearfix\">"+
					"<div class=\"topctent clearfix\">"+
						"<div class=\"left clearfix fl\">"+
							"公告：您好，欢迎登录游戏商场"+
						"</div>"+
						"<div class=\"right clearfix fr\">"+
							"<div class=\"zuo clearfix fl\">"+
								"<ul class=\"clearfix fl\">"+
									"<li id = \"customerInfo\">"+

									"</li>"+
									"<li>"+
										"<a href=\"register.jsp\">"+
											"免费注册"+
										"</a>"+
									"</li>"+
									"<li>"+
										"<a href=\"settled.html\">"+
											"商家入驻"+
										"</a>"+
									"</li>"+
								"</ul>"+
							"</div>"+				
							"<div class=\"shopcar-btn clearfix fl\">"+
								"<a href=\"javascript:void(0)\" class=\"box-s\" id=\"shopCount\">"+
									"购物车（0）"+
								"</a>"+
							"</div>"+
							"<div class=\"fenxiang clearfix fl\">"+
								"<span class=\"fl\">分享到：</span>"+
								"<ul class=\"clearfix fl\">"+
									"<li><a href=\"#\"><img src=\"img/sina.png\"/></a></li>"+
									"<li><a href=\"#\"><img src=\"img/qq.png\"/></a></li>"+
									"<li><a href=\"#\"><img src=\"img/wechat.png\"/></a></li>"+
								"</ul>"+
							"</div>"+
						"</div>"+				
					"</div>"+
				"</div>"+			
				"<div class=\"bottom clearfix\" style=\"\">"+
					"<div class=\"clearfix\">"+
					"<video loop=\"loop\" autoplay=\"autoplay\" preload=\"\" muted=\"muted\" src=\"https://a.sinaimg.cn/mintra/pic/2112130543/weibo_login.mp4\" poster=\"https://a.sinaimg.cn/mintra/pic/2112130400/18weibo_login.png\" class=\"LoginTopNav_video_1W33g\" style=\"position: absolute; width: 1540px; right: -170px;\"> 抱歉，您的浏览器不支持内嵌视频 </video>"+
						/* "<div class=\"bnetIcon--3gWUG icon--1SZos\" aria-hidden=\"true\" style=\"color: #148eff;width: 130px;\">"+
								"<div class=\"iconSvg--7rod7\" style=\"fill: currentColor;\">"+
									"<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 600 580.4\">"+
										"<path d=\"M473.5 197.6c-75.9-35.1-185.1-57.4-287.8-49.1 5.1-34 17.9-57.7 38.7-62.7 28.7-6.9 60 12 89.8 46.3 19.5 2.5 42.7 7 58.9 10.7C318.7 40.5 245.7-16.8 190.2 4.4 148 20.5 126.4 78.6 129 156.7c-55 11.7-97.9 32.5-125.4 62.4-1.4 1.6-4.5 5.7-3.4 7.6.9 1.5 3.6-.2 4.9-1 31.8-22.3 72.6-34.3 125.7-41.9 7.6 83.3 42.8 189 101.4 273.8-32 12.6-58.9 13.4-73.6-2.2-20.3-21.4-19.6-58-4.8-101-7.6-18.2-15.3-40.5-20.1-56.3-61.6 98.3-74.8 190.2-28.7 227.7 35.1 28.5 96.2 18.2 162.5-23.1 37.6 41.8 77.1 68.5 116.7 77.3 2.1.4 7.2 1.1 8.3-.8.9-1.5-2-3.1-3.3-3.7-35.2-16.4-66-45.7-99.1-87.9 68.4-48.2 142.3-131.6 186.4-224.7 26.9 21.5 41 44.3 34.9 64.9-8.4 28.3-40.4 46-85.1 54.6-12 15.7-27.4 33.5-38.7 45.6 115.8 4 202-30.5 211.4-89.1 7.2-44.6-32.4-92.4-101.3-129.2 17.4-53.5 20.8-101 8.6-139.7-.7-2-2.6-6.8-4.9-6.8-1.7 0-1.7 3.3-1.6 4.7 3.6 38.6-6.3 80-26.3 129.7zM260.2 444.3c-49-78.6-77.2-171.2-77.1-264.8 92.6-3.1 186.9 18.7 267.9 65.7-43.6 81.7-109.6 152.5-190.8 199.1z\">"+
										"</path>"+
									"</svg>"+
								"</div>"+
						"</div>"+
						"<a href=\"index.jsp\" style=\"position: absolute;top: 0px;width: 130px;height: 120px;\">"+
							
						"</a>"+ */
					"</div>"+
					"<!-- <div class=\"search clearfix fr ra5\">"+
						"<input type=\"text\" class=\"fl\" name=\"\" id=\"\" value=\"\" placeholder=\"请输入您要搜索的内容\" />"+
						"<input type=\"button\" name=\"\" id=\"\" value=\"搜索\" class=\"fl box-s\" />"+
					"</div> -->"+
				"</div>"+
			"</div>"+
			"<!--header end-->"+
			
			"<!--navbar star-->"+
			"<div class=\"navbar clearfix\" style=\"position: relative;background-color: rgba(0,0,0,0);\">"+
				"<div class=\"content clearfix\">"+
					"<ul style=\"background-color: rgba(0,191,255,0.5);height: 51px;\">"+<!-- style=\"background-color: rgba(0,191,255,0.5);height: 51px;\" -->
						"<li><a href=\"index.jsp\">首页精选</a></li>"+
						"<li><a href=\"error.jsp\">游戏专场(待开放)</a></li>"+
						"<li class=\"cur\"><a href=\"mall.jsp\">游戏商城</a></li>"+
						"<li><a href=\"error.jsp\">游戏商家(待开放)</a></li>"+
					"</ul>"+
				"</div>"+
			"</div>"+
			"<!--navbar end-->";
		$("#cen").before(c);
		
		let cid = ${!empty sessionScope.customer.customerId} ?　"${sessionScope.customer.customerId}" : 0;
		/* 获取购物车中游戏数量*/
		
		function s(){
			
			$.ajax({
				async:true,
				type:"GET",
				url:"../OrderServlet",
				data:{
					op:"find",
					orderNo:"0",
					customerId:cid
				},
				contentType:"application/x-www-form-urlencoded",
				dataType:"json",
				success:function(result,status,xhr){
					let count = 0;
					$.each(result.data,function(index,games){
						count = index + 1;
					});
					$("#shopCount").text("购物车（"+count+"）");
					
				},
				
			});	
		}
		/* 调用方法获取购物车中游戏数量*/
		if(cid!=0){
			s();
		}
		
	});
	</script>
		
		
	<script>
	$(function(){
		/* 获取登陆信息 */
		let nickname = "${sessionScope.customer.nickname}";
		let content = "";
		if(nickname!=""){
			content = "<span class=\"fl\">欢迎</span>"+
					"<a href=\"grxx.jsp\" class=\"fl\">"+nickname+"</a>"+
					"<span class=\"fl\">进入商城</span>"+
					"<a href=\"../LoginServlet?op=customerLogout\" class=\"fl\">退出登陆</a>";
		}else{
			content = "<span class=\"fl\">您好，请</span>"+
					"<a href=\"sign.jsp\" class=\"fl\">登录</a>";
		}
		$("#customerInfo").html(content);
		
		$(document).on("click","#shopCount",function(){
			if(nickname!=""){
				$(this).prop("href","shopping.jsp");
			}else{
				alert("请先登录");
			}
		});
		
		
	});
	</script>	
		
		
	<body>
	
	
		<!--mall star-->
		<div class="mall clearfix" id="cen">
			<!--sorts star-->
			<div class="sorts clearfix">
				<div class="content clearfix">
					<div class="top clearfix box-s">
						您的位置：游戏商城
					</div>
					<div class="listed clearfix box-s">
						<div class="list clearfix fl">
							<p class="bt fl">
								类型：
							</p>
							<div class="right clearfix fl">
								<ul id="type">
									<li class="cur" value="0">不限</li>
									<li class="" value="1">动作</li>
									<li class="" value="2">射击</li>
									<li class="" value="3">生存</li>
									<li class="" value="4">恐怖</li>
									<li class="" value="5">沙盒</li>
								</ul>
							</div>
						</div>
						
						<div class="list clearfix fl">
							<p class="bt fl">
								价格：
							</p>
							<div class="right clearfix fl">
								<ul id="price">
									<li class="cur">不限</li>
									<li>0-100元</li>
									<li>100-200元</li>
									<li>200-300元</li>
									<li>300-500元</li>
									<li>500元以上</li>
								</ul>
							</div>
						</div>	
						<div class="list clearfix fl">
							<p class="bt fl">
								名称：
							</p>
							<div class="right clearfix fl">
								<input type="text" class="fl" name="" id="" value="" placeholder="请输入您要搜索的游戏名称" style="width: 236px; height: 33px; border: none; background-color: #eaeaea; text-indent: 1em; color: #070707; position: absolute; top: 183px; left: 74px;">
								<input type="button" name="" id="" value="搜索" class="fl box-s" style="width: 84px; height: 33px; text-align: center; line-height: 33px; border: none; background: #6a0000 url(img/search.png) 10px no-repeat; color: #fff; font-size: 16px; padding-left: 15px; cursor: pointer; position: absolute; left: 310px; top: 183px;">
							</div>
						</div>				
					</div>
				</div>
			</div>
			<!--sorts end-->
			
			<!--sales star-->
			<div class="sales clearfix">
				<div class="content clearfix">
					<div class="top clearfix">
						<div class="left clearfix fl">
							<!--以下li中添加cur的时候是选中的时候-->
							<ul>
								<li>综合排序</li>
								<li class="xliang cur">销量</li>
								<li class="xpin">新品</li>
							</ul>
						</div>
					</div>
					<div class="bottom clearfix" id="mall">
			
						<!-- <div class="list clearfix transition">
							<div class="tu clearfix">
								<img src="upload/2.jpg"/>
								<span></span>
								
								<div class="ycang clearfix">
									<samp class="opa8"></samp>
									<div class="nr clearfix">
										注意：当下方li中添加class名为cur的时候为选中的时候样式
										<ul>
											<li class="box-s transition">收藏</li>
											<li class="box-s transition">
												<a href="shopping.jsp" class="box-s">
												加入购物车
												</a>
											</li>
										</ul>
									</div>								
								</div>
							</div>
							<div class="xia clearfix box-s">
								<p class="bt over">
									尹毅画作
								</p>
								<div class="price clearfix">
									<span class="fl">￥1000.00<samp>原价￥2000.00</samp></span>
									<a href="pro_detail.jsp" class="goumai fr ra3 transition">立即购买</a>
								</div>
							</div>
						</div> -->
						
						
						
					</div>
					<!-- 分页显示 -->
					<div class="page clearfix ta-right">
						<div class="layui-card-body ">
                            <div class="page">
								<!-- 分页 -->
                                <!-- 选择显示条数 -->
								<span class="layui-laypage-limits">
									   <select lay-ignore="" id="select-pageSize" >
									    	<option value="3">3 条/页</option>		
									        <option value="6">6 条/页</option>										
											<option value="9">9 条/页</option>
											<option value="12">12 条/页</option>
											<option value="15">15 条/页</option>
											<option value="18">18 条/页</option>
											<option value="21">21 条/页</option>
										</select>
								</span>
								<!-- 分页信息,后期由脚本动态生成 -->
								<div class="layui-box layui-laypage layui-laypage-default" id="page-info">
								
									<span class="layui-laypage-count">共 100 条</span>
									
									<a style="width: 36px;" href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
									<a style="width: 36px;" href="javascript:;" class="layui-laypage-prev" data-page="1">上一页</a>
									
									<span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
									<a href="javascript:;"data-page="2">2</a>
									<a href="javascript:;" data-page="3">3</a>
									<a href="javascript:;" data-page="4">4</a>
									<a href="javascript:;" data-page="5">5</a>
									
									<a style="width: 36px;" href="javascript:;" class="layui-laypage-next" data-page="2">下一页</a>
									<a style="width: 36px;" href="javascript:;" class="layui-laypage-next layui-disabled" data-page="6">下一页</a>
								
									 <span class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页
									   	<button type="button" class="layui-laypage-btn">确定</button>
									 </span>
								</div>
						<!-- 分页 -->
							</div>
					   	</div>
					   
					   
					   
					   
					   
					</div>
				</div>
			</div>
			<!--sales end-->
		</div>
		<!--mall end-->
		<script type="text/javascript">
		// 全局声明页码
	    let pageNum = 1;
	 	// 发起HTTP GET请求,请求服务器获得游戏
	    getGamesList();
		
	    /*选择分页显示记录数*/
		$(document).on("change","#select-pageSize",function(){
			// 设置全局页码变量值
			pageNum = 1; 
			// 调用查询
			 getGamesList();
		});
		
		/*上一页,页码,下一页点击事件*/
		$(document).on("click","#page-info a",function(){
			
			// 获取点击的页码
			let aPageNum = $(this).data("page"); // 获取超链接上面绑定的自定义属性data-page
			// 判断
			if(aPageNum != 0){
				// 设置全局页码变量值
				pageNum = aPageNum;
				// 调用查询
				getGamesList();
			}
			
		});
		
	    /*页码确认事件*/
	    $(document).on("click","#page-info #search-pageNum",function(){
	    	// 获取最大页码
	    	let maxPageNum = parseInt($("#intput-pageNum").prop("max"));
	    	
	    	// 获取用户输入的页码
	    	let inputPageNum =  parseInt($("#intput-pageNum").val());
	    
	    	// 判断页码是否有效
	    	if(inputPageNum >= 1 && inputPageNum <= maxPageNum){
	    		// 设置全局页码变量值
	    		pageNum = inputPageNum;
	    		// 调用查询
	    		getGamesList();
	    	}else{
	    		layer.msg('输入页码无效', {
					icon : 5,
					time : 1000
				});
	    	}
			
		});
		
	    /*商品-分页查询*/
		function getGamesList() {
			let typeId = "";
			let minPrice = "";
			let maxPrice = "";
			$("#type").children().each(function(index,t){
				let c = $(this).prop("class");
				if(c == "cur"){
					typeId = $(this).val();
					// 获取类型
					
				}
			});
			$("#price").children().each(function(index,p){
				let c = $(this).prop("class");
				if(c == "cur"){
					price = $(this).text();
					// 获取价格
					let range = price.substring(0,price.lastIndexOf("元"));
					let p = range.split("-");
					minPrice = p[0];
					maxPrice = p[1];
				}
			});
			// 获取名称
			let gamesName = $("input[type='text']").val();
			/*商品分页查询*/
			$.ajax({
						type : "GET",
						url : "../GamesServlet",
						data : {
							op : "findByPage",
							typeId: typeId,
							minPrice: minPrice,
							maxPrice: maxPrice,
							gamesName: gamesName,
							pageNum: pageNum,
							pageSize: $("#select-pageSize").val()
						},
						contentType : "application/x-www-form-urlencoed",
						dataType : "json",
						success : function(result) { // 
							// 处理服务器响应的数据,渲染页面
							// 拼接HTML片段-表格数据
							let content = "";
							// result.data是分页对象信息
							// 迭代响应结果对象中的数据属性data.data
							$.each(result.data.data,function(index, games) {
								content += "<div class=\"list clearfix transition\" id=\"gi\">"+
											"<div class=\"tu clearfix\">"+
											"<img id=\"recommendedimages\" src=\"/gamestore/FileDownloadServlet?type=image&fileName="+games.image+"\"/>"+
											"<input type=\"hidden\" id=\"id\" name=\"gamesId\" value=\""+games.gamesId+"\">"+
											"<span></span>"+
											
											"<div class=\"ycang clearfix\">"+
												"<samp class=\"opa8\"></samp>"+
												"<div class=\"nr clearfix\">"+
													
													"<ul>"+
														"<li id=\"djsc\" class=\"box-s transition\" style=\"position: absolute;left: 95px;\">收藏</li>"+
														"<li class=\"box-s transition\" style=\"display:none\">"+
															"<a href=\"shopping.jsp\" class=\"box-s\">"+
															"购物车"+
															"</a>"+
														"</li>"+
													"</ul>"+
												"</div>"+							
											"</div>"+
										"</div>"+
										"<div class=\"xia clearfix box-s\">"+
											"<p class=\"bt over\">"+
												games.gamesName+"（"+games.gamesType.typeName+"）"+
											"</p>"+
											"<div class=\"price clearfix\">"+
												"<span class=\"fl\">￥"+games.price+"</span>"+
												"<span id=\"agp\"><a id=\"ljgm\" href=\"javascript:void(0)\" class=\"goumai fr ra3 transition\">立即购买</a></span>"+
											"</div>"+
										"</div>"+
									"</div>";
									
							/* 查询用户是否已购买 */
							let cid = ${!empty sessionScope.customer.customerId} ?　"${sessionScope.customer.customerId}" : 0;
							let gamesId = games.gamesId;	
							$.ajax({
								async:true,
								type:"GET",
								url:"../OrderServlet",
								data:{
									op:"findByStatusAndGamesIdAndCustomerId",
									status:"1",
									gamesId:gamesId,
									customerId:cid
								},
								contentType:"application/x-www-form-urlencoded",
								dataType:"json",
								success:function(result,status,xhr){
									
									if(result.status == 1){
										/* 没添加一次就发送ajax获取该游戏的订单，说明该游戏id有购买，然后对现在填充的游戏遍历，当所获取的游戏id的索引与现在填充的游戏索引一致 */
										$("#mall").children("div").each(function(i,recommend){
											
											if(i==index){
												if($(this).find("input[name='gamesId']").val()==gamesId){
													$(this).find("#agp").html("<a href=\"javascript:void(0)\" class=\"goumai fr ra3 transition\" style=\"background-color: green;\">已购买</a>");
												}/* else{
													
													$(this).find("#agp").html("<a id=\"ljgm\" href=\"javascript:void(0)\" class=\"goumai fr ra3 transition\">立即购买</a>");
												} */
											}
											
										});
										
										
									  }
										
									},
						     	});
							
								// 查询用户是否已收藏
							$.ajax({
								async:true,
								type:"GET",
								url:"../CollectionServlet",
								data:{
									op:"find",
									gamesId:gamesId,
									customerId:cid
								},
								contentType:"application/x-www-form-urlencoded",
								dataType:"json",
								success:function(result,status,xhr){
									if(result.status==1){
										/* alert("已收藏"); */
										
										$("#mall").children("div").each(function(i,recommend){
											
											if(i==index){
												if($(this).find("input[name='gamesId']").val()==gamesId){
													$(this).find("#djsc").text("已收藏");
													$(this).find("li:first-child").css("color","#600000");
													$(this).find("li:first-child").css("background","url(img/shoucang1.png) 50px no-repeat");
												}
											}
											
										});
										
									}else{
										/* alert("收藏"); */
									}

								},
								
							});
							
							
							});

							// 拼接HTML片段-分页信息
							// 总条数
							let pageInfoContent = "<span class=\"layui-laypage-count\">共 "+result.data.total+" 条</span>";
							// 上一页
							if(result.data.pageNum == 1){
								pageInfoContent += "<a style=\"width: 36px;\" href=\"javascript:;\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\">上一页</a>";
							}else{
								pageInfoContent += "<a style=\"width: 36px;\" href=\"javascript:;\" class=\"layui-laypage-prev\" data-page=\""+(result.data.pageNum-1)+"\">上一页</a>";
							}
							// 页码
							for(let i = 1; i <= result.data.pages;i++){
								if(result.data.pageNum == i){
									pageInfoContent +="<span class=\"layui-laypage-curr\"><em class=\"layui-laypage-em\"></em><em>"+i+"</em></span>";
								}else{
									pageInfoContent +="<a href=\"javascript:;\" data-page=\""+i+"\">"+i+"</a>";
								}
							}
						
	 						// 下一页					
							if(result.data.pageNum == result.data.pages){
								pageInfoContent +="<a style=\"width: 36px;\" href=\"javascript:;\" class=\"layui-laypage-next layui-disabled\" data-page=\"0\">下一页</a>";
							}else{
								pageInfoContent +="<a style=\"width: 36px;\" href=\"javascript:;\" class=\"layui-laypage-next\" data-page=\""+(result.data.pageNum+1)+"\">下一页</a>";
							}
							// 搜索页码
							pageInfoContent +=  "<span class=\"layui-laypage-skip\">到第<input type=\"text\" min=\"1\" max=\""+result.data.pages+"\" value=\"1\" class=\"layui-input\" id=\"intput-pageNum\">页"+
							                  	 	"<button type=\"button\" class=\"layui-laypage-btn\" id=\"search-pageNum\">确定</button>"+
							                    "</span>";
							
							
							// 设置表格数据内容在指定DOM元素上
							$("#mall").html(content);
							
							// 设置分页信息内容在指定DOM元素上
							$("#page-info").html(pageInfoContent);
							
							
						},
						error : function() {
							alert("异步请求失败");
						}
					});
		}
		
		</script>
		
		<script>
		$(function(){
			$(document).on("click","#ljgm",function(){
				let cid = ${!empty sessionScope.customer.customerId} ?　"${sessionScope.customer.customerId}" : 0;
				let gamesId = $(this).parents("#gi").find("input[name='gamesId']").val();
				if(cid!=0){
					location.href="jiesuan.jsp?gamesId="+gamesId;
				}else{
					alert("请先登录");
				}
				
			});
		})
		</script>
		
		
		
		<script>
		$(document).on("click","#djsc",function(){
			let cid = ${!empty sessionScope.customer.customerId} ?　"${sessionScope.customer.customerId}" : 0;
			if(cid!=0){
				let gamesId = $(this).parents("#gi").find("input[name='gamesId']").val();
				let obj = $(this);
				if( $(this).text()=="收藏"){
					/* 添加收藏 */
					$.ajax({
						async:true,
						type:"GET",
						url:"../CollectionServlet",
						data:{
							op:"add",
							gamesId:gamesId,
							customerId:cid
						},
						contentType:"application/x-www-form-urlencoded",
						dataType:"json",
						success:function(result,status,xhr){
							if(result.status==1){
								
								obj.text("已收藏");
								obj.css("color","#600000");
								obj.css("background","url(img/shoucang1.png) 50px no-repeat");
								alert("收藏成功");
							}
							
						},
						
					});
				}else{
					/* 删除收藏 */
					$.ajax({
						async:true,
						type:"GET",
						url:"../CollectionServlet",
						data:{
							op:"delete",
							gamesId:gamesId,
							customerId:cid
						},
						contentType:"application/x-www-form-urlencoded",
						dataType:"json",
						success:function(result,status,xhr){
							if(result.status==1){
								obj.text("收藏");
								obj.css("color","");
								obj.css("background","url(img/shoucang.png) 50px no-repeat");
								alert("取消收藏成功");
							}
							
						},
						
					});
				}
				

			}else{
				alert("请登录再收藏");
			}
		});
		</script>
		
		
		
		
		<!--footer star-->
		<div class="footer clearfix">
			<div class="content clearfix">
				<div class="top clearfix">
					<div class="list clearfix fl box-s">
						<div class="part icon1 box-s">
							<h3>专业</h3>
							<p>拥有资深游戏顾问和先进交易平台，安全交易，快捷支付。</p>
						</div>
					</div>
					<div class="list clearfix fl box-s">
						<div class="part icon2 box-s">
							<h3>保真</h3>
							<p>为您精选具备收藏价值的游戏作品，助您的资产保值、增值。</p>
						</div>
					</div>
					<div class="list clearfix fl box-s">
						<div class="part icon3 box-s">
							<h3>保值</h3>
							<p>为您精选具备收藏价值的游戏作品，助您的资产保值、增值。</p>
						</div>
					</div>
				</div>
				<div class="bottom clearfix">
					<div class="left clearfix fl">
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>新手指南</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="scgmlc.html">购买流程</a></li>
									<li><a href="cjwt.html">常见问题</a></li>
								</ul>
							</div>
						</div>
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>账户管理</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="zhcz.html">账户充值</a></li>
									<li><a href="zhtx.html">账户提现</a></li>
									<li><a href="zffs.html">支付方式</a></li>
								</ul>
							</div>
						</div>						
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>服务合作</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="friend-link.html">友情链接</a></li>
									<li><a href="ysjrz.html">玩家入驻</a></li>
								</ul>
							</div>
						</div>
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>关于我们</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="gsjj.html">商城简介</a></li>
									<li><a href="contact.html">联系我们</a></li>
									<li><a href="jrwm.html">加入我们</a></li>
								</ul>
							</div>
						</div>
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>售后服务</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="wlsm.html">交易说明</a></li>
									<li><a href="mzsm.html">免责声明</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="middle clearfix fl">
						<ul>
							<li><img src="upload/ewm.jpg"/></li>
							<li><img src="upload/ewm.jpg"/></li>
						</ul>
					</div>
					<div class="right clearfix fr">
						<p class="bt">免费咨询热线：</p>
						<p class="tel">400-000-0000</p>
						<p class="fu-bt">(周一到周五8:00-22:00)</p>
					</div>
				</div>
			</div>
			<div class="banquan clearfix ta-center">
				Copyright © 2021 厦门游戏商城(xiamenyouxishangcheng). All Rights Reserved. 
			</div>
		</div>
		<!--footer end-->
	</body>
	<script type="text/javascript">
		$('.listed .list ul li').each(function() {
			$(this).click(function() {
				$(this).siblings("li").removeClass("cur");
				$(this).addClass("cur");
			});
		});
	</script>
	<script src="js/other.js" type="text/javascript" ></script>
	<script>
	// 对类型选择绑定事件
	$(document).on("click","#type li",function(){      
		/* 获取类型 */
		let typeId = $(this).val();
		let minPrice = "";
		let maxPrice = "";
		$("#price").children().each(function(index,p){
			let c = $(this).prop("class");
			if(c == "cur"){
				price = $(this).text();
				// 获取价格
				let range = price.substring(0,price.lastIndexOf("元"));
				let p = range.split("-");
				minPrice = p[0];
				maxPrice = p[1];
			}
		});
		
		// 获取名称
		let gamesName = $("input[type='text']").val();
		// 调用查询方法
		getGamesList();
		/* find_by_condition(typeId, minPrice, maxPrice, gamesName); */
	});
	// 对价格选择绑定事件
	$(document).on("click","#price li",function(){
		/* 获取价格 */
		let price = $(this).text();
		let range = price.substring(0,price.lastIndexOf("元"));
		let p = range.split("-");
		let minPrice = p[0];
		let maxPrice = p[1];
		let typeId = "";

		$("#type").children().each(function(index,t){
			let c = $(this).prop("class");
			if(c == "cur"){
				typeId = $(this).val();
				// 获取类型
				
			}
		});
		// 获取名称
		let gamesName = $("input[type='text']").val();
		// 调用查询方法
		getGamesList();
		/* find_by_condition(typeId, minPrice, maxPrice, gamesName); */
	});
	// 对名称输入框绑定事件
	$(document).on("click","input[value='搜索']",function(){
		/* 获取名称 */
		let gamesName = $(this).siblings().val();
		let typeId = "";
		let minPrice = "";
		let maxPrice = "";
		$("#type").children().each(function(index,t){
			let c = $(this).prop("class");
			if(c == "cur"){
				typeId = $(this).val();
				// 获取类型
				
			}
		});
		$("#price").children().each(function(index,p){
			let c = $(this).prop("class");
			if(c == "cur"){
				price = $(this).text();
				// 获取价格
				let range = price.substring(0,price.lastIndexOf("元"));
				let p = range.split("-");
				minPrice = p[0];
				maxPrice = p[1];
			}
		});
		// 调用查询方法
		getGamesList();
		/* find_by_condition(typeId, minPrice, maxPrice, gamesName); */
		
	});
	
	
	
	// 查询所有游戏
	function find_by_condition(typeId, minPrice, maxPrice, gamesName){
		$.ajax({
			async:true,
			type:"GET",
			url:"../GamesServlet",
			data:{
				op:"findAllGamesByCondition",
				typeId:typeId,
				minPrice:minPrice,
				maxPrice:maxPrice,
				gamesName:gamesName
			},
			contentType:"application/x-www-form-urlencoded",
			dataType:"json",
			success:function(result,status,xhr){
				let content = "";
				
				$.each(result.data,function(index,games){
					/* 注意：当下方li中添加class名为cur的时候为选中的时候样式 */
					content += "<div class=\"list clearfix transition\">"+
									"<div class=\"tu clearfix\">"+
									"<img id=\"recommendedimages\" src=\"/gamestore/FileDownloadServlet?type=image&fileName="+games.image+"\"/>"+
									"<input type=\"hidden\" id=\"id\" name=\"gamesId\" value=\""+games.gamesId+"\">"+
									"<span></span>"+
									
									"<div class=\"ycang clearfix\">"+
										"<samp class=\"opa8\"></samp>"+
										"<div class=\"nr clearfix\">"+
											
											"<ul>"+
												"<li class=\"box-s transition\">收藏</li>"+
												"<li class=\"box-s transition\">"+
													"<a href=\"shopping.jsp\" class=\"box-s\">"+
													"加入购物车"+
													"</a>"+
												"</li>"+
											"</ul>"+
										"</div>"+							
									"</div>"+
								"</div>"+
								"<div class=\"xia clearfix box-s\">"+
									"<p class=\"bt over\">"+
										games.gamesName+"（"+games.gamesType.typeName+"）"+
									"</p>"+
									"<div class=\"price clearfix\">"+
										"<span class=\"fl\">￥"+games.price+"</span>"+
										"<span id=\"agp\"><a href=\"jiesuan.jsp?gamesId="+games.gamesId+"\" class=\"goumai fr ra3 transition\">立即购买</a></span>"+
									"</div>"+
								"</div>"+
							"</div>";
							
					/* 查询用户是否已购买 */
					let cid = ${!empty sessionScope.customer.customerId} ?　"${sessionScope.customer.customerId}" : 0;
					let gamesId = games.gamesId;	
					$.ajax({
						async:true,
						type:"GET",
						url:"../OrderServlet",
						data:{
							op:"findByStatusAndGamesIdAndCustomerId",
							status:"1",
							gamesId:gamesId,
							customerId:cid
						},
						contentType:"application/x-www-form-urlencoded",
						dataType:"json",
						success:function(result,status,xhr){
							
							if(result.status == 1){
								
								$("#mall").children("div").each(function(i,recommend){
									
									if(i==index){
										if($(this).find("input[name='gamesId']").val()==gamesId){
											$(this).find("#agp").html("<a href=\"javascript:void(0)\" class=\"goumai fr ra3 transition\" style=\"background-color: green;\">已购买</a>");
										}else{
											$(this).find("#agp").html("<a href=\"jiesuan.jsp?gamesId="+gamesId+"\" class=\"goumai fr ra3 transition\">立即购买</a>");
										}
									}
									
								});
								
								
							  }
								
							},
				     	});
							
					
							
					});
				$("#mall").html(content);
			},
		});
	}
	</script>
	
	
	
	
</html>